import React, {Component} from 'react';
import { Table } from 'antd';

const { Column, ColumnGroup } = Table;

const globalHeight = document.documentElement.clientHeight
const tableHeight = globalHeight - 227

let P_Value = {
	'年龄': {statistic: 1.3565560074933085, pvalue: 0.17820632419119573},
	'身高': {statistic: -0.30477740356836563, pvalue: 0.76121669797648428},
	'体重': {statistic: -0.13190781151302847, pvalue: 0.89534842257807423},
	'BMI': {statistic: 0.30261255376188101, pvalue: 0.76287577646404336},
	'肌酐': {statistic: 2.0334457779054502, pvalue: 0.044857097674286694},
	'尿酸': {statistic: -1.0640324949318429, pvalue: 0.29006891272724511},
	'尿素氮': {statistic: 1.4173502322862079, pvalue: 0.15972213838016064},
	'GFR': {statistic: -2.1031527267494607, pvalue: 0.038152663245804234},
	'血红蛋白': {statistic: -0.19606495758072598, pvalue: 0.84498710678398303},
	'白细胞计数': {statistic: 0.3648998166665896, pvalue: 0.71601468304588511},
	'随访次数': {statistic: 1.8381664227761736, pvalue: 0.069230100369440842},
	'随访时长': {statistic: 5.1302255407387083, pvalue: '1.575e-06'}, // 1.5749898975034847e-06
	'egfrSlopeK': {statistic: -0.66198090153582112, pvalue: 0.50962047965159663},
	'scr_1': {statistic: -0.74114150574732685, pvalue: 0.4604749890642551},
	'hbAverage': {statistic: -0.98724268371448354, pvalue: 0.32608525907569774},
	'uaAverage': {statistic: 0.051956642879894356, pvalue: 0.95867467779489812},
}

let GLOBAL_RES = {}
for(let key in P_Value) {
	let pvalue = ''
	if(key === '随访时长') {
		pvalue = P_Value[key]['pvalue']
	}
	else {
		pvalue = P_Value[key]['pvalue'].toFixed(3)
	}

	GLOBAL_RES[key] = {
		pvalue,
		statistic: P_Value[key]['statistic'].toFixed(3),
	}
}

function getNameByKey(key) {
	if(key === 'egfrSlopeK') {
		return 'GFR Slope'
	}

	if(key === 'scr_1') {
		return '预计进入透析时间'
	}

	if(key === 'hbAverage') {
		return '血红蛋白控制值'
	}

	if(key === 'uaAverage') {
		return '尿酸控制值'
	}

	if(key === 'hbAverageStd') {
		return 'Hb controlled rate'
	}

	if(key === 'uaAverageStd') {
		return 'Ua controlled rate'
	}

	if(key === 'CKD_Change') {
		return 'CKD分期变化'
	}

	return key
}

const url = 'http://127.0.0.1:3000/'

class Home extends Component {
	constructor(props) {
		super(props)
		this.state = {
			data: []
		}
	}

	componentDidMount() {
		fetch('/statistics', {
			credentials: 'include'
		}).then((res) => {
			if(res.status !== 200) {
				throw new Error('Load Failed, Status:' + res.status);
			}
			res.json().then(({status, data}) => {
				if(status == 0) {
					console.log('error');
				}

				const percentKeys = ['性别','糖尿病','高血压', '尿蛋白', 'CKD', 'CKD_Change', 
				'hbAverageStd', 'uaAverageStd']
				const keys = ['年龄','性别','糖尿病','高血压','身高', '体重', 'BMI',
				'肌酐','尿酸','尿素氮', 'GFR', '血红蛋白','白细胞计数','尿蛋白', 'CKD',
				'随访次数', '随访时长', 'egfrSlopeK', 'scr_1', 'CKD_Change', 'hbAverage',
				'uaAverage', 'hbAverageStd', 'uaAverageStd']
				
				const dataTemp = keys.map((key, index) => {
					if(percentKeys.includes(key)) {
						return {
							key: index,
							name: getNameByKey(key),
							manageStd: '-',
							controlStd: '-',
							manageAverage: '-',
							controlAverage: '-',
							pValue: 'K_Value(' + data['pValue'][key] + ')',
							managePercent: (
								<div>
									{/* <div className="flex-display flex-title">
										<span></span>
										<span>Num</span>
										<span>Percent</span>
									</div> */}
									{
										data['manage'][key].map((item, index) => (
											<div className="flex-display" key={index}>
												<span>{item.value}</span>
												<span>{item.count}</span>
												<span>{(item.percent * 100).toFixed(2)}%</span>
											</div>
										))
									}
								</div>
							),
							controlPercent: (
								<div>
									{/* <div className="flex-display flex-title">
										<span></span>
										<span>Num</span>
										<span>Percent</span>
									</div> */}
									{
										data['control'][key].map((item, index) => (
											<div className="flex-display" key={index}>
												<span>{item.value}</span>
												<span>{item.count}</span>
												<span>{(item.percent * 100).toFixed(2)}%</span>
											</div>
										))
									}
								</div>
							)
						}
					}

					const temp = <div>
						<div>{GLOBAL_RES[key]['pvalue']} &nbsp;&nbsp; t_Value({GLOBAL_RES[key]['statistic']})</div>
					</div>
					return {
						key: index,
						name: getNameByKey(key),
						managePercent: '-',
						controlPercent: '-',
						pValue: temp,
						manageStd: data['manage'][key]['std'],
						controlStd: data['control'][key]['std'],
						manageAverage: data['manage'][key]['average'],
						controlAverage: data['control'][key]['average'],
					}
				})

				dataTemp.splice(18, 0, {
					key: -1,
					name: 'CKD进展',
					managePercent: data['CKD_Progress']['manage'],
					controlPercent: data['CKD_Progress']['control'],
					pValue: '-',
					manageStd: '-',
					controlStd: '-',
					manageAverage: '-',
					controlAverage: '-',
				})

				this.setState({
					data: dataTemp
				});
			}).catch((error) => {
				console.log(error);
				
				this.setState({error: "Load Failed"});
			})
			
		}).catch((error) => {
			console.log(error);
			
			this.setState({error: "Load Failed"});
		});
	}
	
	render() {
		const { data } = this.state

		return (
			<div className="table-wrap">
				<Table dataSource={data} pagination={false} scroll={{ y: tableHeight }}>
					<Column
						title="指标"
						width={120}
						dataIndex="name"
					/>
					<ColumnGroup title="对照组">
						<Column
							title="均值"
							width={90}
							dataIndex="controlAverage"
						/>
						<Column
							title="标准差"
							width={90}
							dataIndex="controlStd"
						/>
						<Column
							title="百分比"
							width={180}
							dataIndex="controlPercent"
						/>
					</ColumnGroup>
					<ColumnGroup title="管理组">
						<Column
							title="均值"
							width={90}
							dataIndex="manageAverage"
						/>
						<Column
							title="标准差"
							width={90}
							dataIndex="manageStd"
						/>
						<Column
							title="百分比"
							width={180}
							dataIndex="managePercent"
						/>
					</ColumnGroup>
					<Column
						title="P值"
						width={180}
						dataIndex="pValue"
					/>
				</Table>
			</div>
		)
	}
}

export default Home;